<template>
  <div class="text-center">
    <Motions>
      <h2 class="title">免费注册</h2>
    </Motions>
  </div>
  <a-form :model="formState" ref="formRef" @finish="onFinish">
    <Motions :delay="100">
      <a-form-item name="tenantName" :rules="[{ required: true, message: '请输入店铺名称' }]">
        <a-input v-model:value="formState.tenantName" placeholder="店铺名称" size="large">
          <template #prefix>
            <ShopOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input>
      </a-form-item>
    </Motions>
    <Motions :delay="150">
      <a-form-item name="mobile" :rules="[
        { required: true, message: '请输入手机号' },
        { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' },
      ]">
        <a-input v-model:value="formState.mobile" placeholder="手机号" size="large" :maxlength="11">
          <template #prefix>
            <TabletOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input>
      </a-form-item>
    </Motions>
    <Motions :delay="200">
      <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码' }]">
        <a-input v-model:value="formState.code" placeholder="验证码" size="large">
          <template #prefix>
            <SafetyCertificateOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
          <template #suffix>
            <a-button :disabled="isActive" type="link" class="p-0 m-0 !text-base" size="small" @click="countDown">
              {{ !isActive ? "获取验证码" : `${count}秒后重新获取` }}
            </a-button>
          </template>
        </a-input>
      </a-form-item>
    </Motions>
    <Motions :delay="250">
      <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
        <a-input-password autocomplete v-model:value="formState.password" placeholder="设置密码" size="large"
          current-password>
          <template #prefix>
            <LockOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input-password>
      </a-form-item>
    </Motions>
    <Motions :delay="300">
      <a-form-item name="enterpassword" :rules="[{ required: true, message: '请确认密码' }]">
        <a-input-password autocomplete v-model:value="formState.enterpassword" placeholder="确认密码" size="large"
          current-password>
          <template #prefix>
            <LockOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input-password>
      </a-form-item>
    </Motions>
    <Motions :delay="350">
      <a-form-item>
        <a-button block size="large" type="primary" html-type="submit">
          立即搭建平台助手
        </a-button>
      </a-form-item>
    </Motions>
    <Motions :delay="400">
      <div class="text-center">
        <a-button block type="primary" ghost size="large" @click="login">去登录</a-button>
      </div>
    </Motions>
  </a-form>
</template>

<script setup lang="ts">
import { TabletOutlined, LockOutlined, ShopOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue';
import Motions from './motion.vue'
import { useUserStore } from "@/store";
import { app } from '@/utils';
import { message, type FormInstance } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router'
const { count, start, isActive } = app.useCounter()
const route = useRoute()
const router = useRouter()

interface FormState {
  mobile: string;
  password: string;
  tenantName: string,
  code: string,
  enterpassword: string,
}

const formRef = ref<FormInstance>()
const formState = reactive<FormState>({
  mobile: '',
  password: '',
  tenantName: '',
  code: '',
  enterpassword: '',
});

const onFinish = (values: FormState) => {
  if (values.enterpassword !== values.password) {
    message.error('两次输入的密码不一致')
    return
  } else {
 
      localStorage.setItem('token', 'zuce')
      message.success('注册成功')
      if (route.query.path) router.push(String(route.query.path));
      else router.push('/')
   
  }
};

const login = () => {
  useUserStore().SET_CURRENTPAGE(0)
}

const countDown = () => {
  formRef.value?.validate(['mobile']).then(() => {
    start()

  })
}
</script>

<style lang="less" scoped>
.title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #2ec79c;
  margin-top: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
